import * as echarts from 'echarts';
// import BaseComponent from '../../components/base_component_class.js'

class BaseEcharts {
  constructor(options) {
    this.state = {
      tooltip: {
        backgroundColor: '#fff',
        textStyle: {
          color: '#999EA8',
        },
        show: true,
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        extraCssText: 'box-shadow: 0px 3px 7px 0px rgba(219, 224, 231, 0.96);',
      },
      legend: {
        show: true,
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 6,
        itemHeight: 6,
        x: 'right',
        y: 'center',
        align: 'left',
        data: [],
      },
      grid: {
        left: '20px',
        top: '45px',
        right: '20px',
        bottom: '20px',
        containLabel: true,
      },
      title: {
        text: '',
        subtext: '',
        x: 'auto',
        y: 'auto',
        textStyle: {
          color: '#2a2c31',
          fontSize: 12,
        },
        textVerticalAlign: '',
        itemGap: 5,
        padding: 0,
        subtextStyle: {
          color: '#2a2c31',
          fontSize: 14,
        },
      },
      option: null,
    };
    this.prop = options;
    // 实例化echarts组件
    this.echartsIns = echarts.init(document.getElementById(this.prop.id));
    // 加载基本属性 tooltip
    this._comData();
    // 加载各子类的私有属性
    this._initData();
    // 生成图表
    this.echartsIns.setOption(this.state.option);
    // 图表自适应
    this._bindResizeEvent();
  }

  _comData() {}

  _initData() {}

  _bindResizeEvent() {
    window.addEventListener('resize', () => {
      this.echartsIns.resize();
    });
  }
}

export class PieEcharts extends BaseEcharts {
  // constructor (options) {
  //   super(options)
  // }

  _initData() {
    const tooltip = Object.assign(this.state.tooltip, this.prop.tooltip);
    const legend = Array.isArray(this.prop.legend)
      ? this.prop.legend
      : Object.assign(this.state.legend, this.prop.legend);
    const grid = Object.assign(this.state.grid, this.prop.grid);
    const title = Object.assign(this.state.title, this.prop.title);
    const center = this.prop.center || ['50%', '50%'];
    this.state.option = {
      tooltip: tooltip,
      title: title,
      legend: legend,
      grid: grid,
      graphic: {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          text: this.prop.pieTag || '',
          textAlign: 'center',
          textVerticalAlign: 'middle',
          fill: '#2a2c31',
          color: '#2a2c31',
          fontSize: this.prop.pieTagSize || 18,
          // fontWeight: 'bold',
          fontFamily: 'PingFangSC',
        },
      },
      color: this.prop.color || [
        '#c23531',
        '#2f4554',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3',
      ],
      series: [
        {
          name: this.prop.title,
          type: 'pie',
          hoverOffset: this.prop.hoverOffset === undefined ? 5 : this.prop.hoverOffset,
          hoverAnimation: this.prop.hoverAnimation || this.prop.hoverAnimation === undefined,
          radius: this.prop.radius || ['45%', '60%'],
          center: center,
          avoidLabelOverlap: false,
          label: this.prop.label || {
            normal: {
              show: false,
            },
          },
          labelLine: this.prop.label || {
            normal: {
              show: false,
            },
          },
          data: this.prop.data.seriesData,
        },
      ],
    };
  }
}

export class LineEcharts extends BaseEcharts {
  // constructor (options) {
  //   super(options)
  // }

  _initData() {
    const tooltip = Object.assign(this.state.tooltip, this.prop.tooltip);
    const legend = Object.assign(this.state.legend, this.prop.legend);
    const grid = Object.assign(this.state.grid, this.prop.grid);
    const title = Object.assign(this.state.title, this.prop.title);
    const msg = this.prop.yAxis ? (this.prop.yAxis.msg ? this.prop.yAxis.msg : '') : '';
    this.state.option = {
      title: title,
      grid: grid,
      tooltip: tooltip,
      xAxis: {
        type: 'category',
        maxInterval: 1,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#686C78',
          },
        },
        axisPointer: {
          show: true,
          type: 'line',
          lineStyle: {
            type: 'dotted',
            color: this.prop.axisPointerColor,
          },
          snap: true,
        },
        axisTick: {
          show: false,
        },
        boundaryGap: this.prop.xBoundaryGap || false,
        data: this.prop.xAxis || [],
      },
      dataZoom: this.prop.dataZoom || [],
      color: this.prop.color || [
        '#c23531',
        '#2f4554',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3',
      ],
      legend: legend,
      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#686C78',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: '{value}' + msg,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#E7EAEF',
          },
        },
      },
      series: this.prop.data.seriesData,
    };
  }
}

export class BarEcharts extends BaseEcharts {
  // constructor (options) {
  //   super(options)
  // }

  _initData() {
    const tooltip = Object.assign(this.state.tooltip, this.prop.tooltip);
    const legend = Object.assign(this.state.legend, this.prop.legend);
    const grid = Object.assign(this.state.grid, this.prop.grid);
    const title = Object.assign(this.state.title, this.prop.title);
    this.state.option = {
      grid: grid,
      tooltip: tooltip,
      title: title,
      legend: legend,
      xAxis: {
        show: false,
      },
      yAxis: [
        {
          type: 'category',
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: '#686C78',
            fontSize: '14',
            margin: this.prop.labelMargin || 8,
          },
          axisTick: {
            show: false,
          },
          data: this.prop.yAxis.dataLeft,
        },
        {
          show: this.prop.yAxis.dataRight,
          type: 'category',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#686C78',
            fontSize: '14',
            margin: this.prop.labelMargin || 8,
          },
          data: this.prop.yAxis.dataRight || [],
        },
      ],
      series: [
        {
          type: 'bar',
          yAxisIndex: 0,
          barWidth: this.prop.barWidth || '10px',
          itemStyle: {
            normal: {
              color: '#2370e7',
              barBorderRadius: 15,
            },
            emphasis: {
              color: '#2370e7',
              barBorderRadius: 15,
            },
          },
          data: this.prop.data.seriesData,
        },
        {
          type: 'bar',
          barWidth: this.prop.barWidth || '10px',
          barCategoryGap: '120px',
          itemStyle: {
            normal: {
              barBorderRadius: 15,
              color: '#ecf2ff',
            },
            emphasis: {
              barBorderRadius: 15,
              color: '#ecf2ff',
            },
          },
          z: 1,
          yAxisIndex: 1,
          data: [1, 1, 1],
        },
      ],
    };
  }
}

// export default { PieEcharts, LineEcharts, BarEcharts }
